import {Component} from 'react'
import Timer from './Timer'
// 16.8.0以前，函数组件就是木偶组件
// 状态,更新状态
// 页面有更新，就要用状态控制，就要调用setState

class Section extends Component {
    state={
        count: 0, 
        name: 'hello',
        list: [],
        isShowTimer: true
    }
    handleClick = ()=>{
        this.setState({
            count: this.state.count+1
        })
    }
    handleTimer = () => {
        this.setState({isShowTimer: !this.state.isShowTimer})
    }
    componentDidMount(){
        // 页面挂载成功后只执行一次的功能
        fetch('https://cnodejs.org/api/v1/topics')
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
                this.setState({list: res.data})
            })
    }
    componentDidUpdate(){
        console.log('update')
    }
    render(){
        console.log('render')
        return (
            <div>
                {this.state.isShowTimer && <Timer />}
                <button onClick={this.handleTimer}>显示/隐藏Timer</button>
                <h2>{this.state.name}类组件</h2>
                {/* 实现一个计数器 */}
                <h3>{this.state.count}</h3>
                <button onClick={this.handleClick}>点击+1</button>
                <ul>
                    {
                        this.state.list.map(item=>{
                            return (
                                <li>{item.title}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Section;

